<template>
  <div id="payPwd">
    <input ref="pwd" v-model="msg" inputmode="numeric" type="tel" maxlength="6" class="pwd" unselectable="on" @blur="inputBlur" @focus="inputFocus">
    <!-- <input ref="pwd" type="tel" maxlength="6" v-model="msg"  unselectable="on" /> -->
    <ul class="pwd-wrap" @click="focus">
      <li>
        <div :class="msg.length === 0&&isFocus?'psd-blink':''" />
        <i v-if="msg.length > 0" />
      </li>
      <li>
        <div :class="msg.length === 1&&isFocus?'psd-blink':''" />
        <i v-if="msg.length > 1" />
      </li>
      <li>
        <div :class="msg.length === 2&&isFocus?'psd-blink':''" />
        <i v-if="msg.length > 2" />
      </li>
      <li>
        <div :class="msg.length === 3&&isFocus?'psd-blink':''" />
        <i v-if="msg.length > 3" />
      </li>
      <li>
        <div :class="msg.length === 4&&isFocus?'psd-blink':''" />
        <i v-if="msg.length > 4" />
      </li>
      <li>
        <div :class="msg.length === 5&&isFocus?'psd-blink':''" />
        <i v-if="msg.length > 5" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      msg: '',
      isFocus: true
    }
  },
  computed: {},
  watch: {
    msg(curVal) {
      if (/[^\d]/g.test(curVal)) {
        this.msg = curVal.replace(/[^\d]/g, '')
      }
      if (this.msg.length === 6) {
        this.sendPsw()
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(x => {
      this.$refs.pwd.focus()
    })
  },
  methods: {
    focus() {
      this.$refs.pwd.focus()
    },
    defaultPsw() {
      this.msg = ''
    },
    sendPsw() {
      this.$emit('sendPsw', this.msg)
    },
    inputBlur() {
      this.isFocus = false
    },
    inputFocus() {
      this.isFocus = true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #payPwd {
    height: auto;
    input[type="tel"] {
      position: fixed;
      top: 50px;
      border: none;
      opacity: 0;
      z-index: -1;
      width: 0.1px;
      height: 0.1px;
      color: transparent;
    }
    //光标
    .psd-blink {
      position: absolute;
      width: 2px;
      height: 30px;
      left: 24px;
      top: 10px;
      border-radius: 4px;
      background-color: #333;
      animation: inputline 1.5s infinite;
    }
    @keyframes inputline {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    .pwd-wrap {
      width: 350px;
      height: 50px;
      padding-bottom: 1px;
      margin: 0 auto;
      background: #fff;
      display: flex;
      cursor: pointer;
      li {
        position: relative;
        list-style-type: none;
        text-align: center;
        width: 50px;
        height: 100%;
        margin-right: 10px;
        line-height: 50px;
        border: 1px solid #ddd;
        &:last-child {
          margin-right: 0;
        }
        i {
          height: 10px;
          width: 10px;
          border-radius: 50%;
          background: #000;
          display: inline-block;
        }
      }
    }
  }
</style>
